<template>
  <div>
    <table :class="$style.table">
      <tbody :class="$style.tbody">
        <tr>
          <td :class="$style.title" colspan="6">设计图稿</td>
        </tr>
        <tr>
          <td :class="$style.labelTitle" colspan="6">款式图</td>
        </tr>
        <tr>
          <td :class="$style.imageList">
            <img
              v-for="(imgItem, index) in styleInfo"
              :key="index"
              :class="$style.previewImage"
              :src="imgItem.ossUrl || cupsheImg"
              alt="款式图"
            />
          </td>
        </tr>

        <tr>
          <td :class="$style.labelTitle" colspan="6">印花配色图</td>
        </tr>
        <tr>
          <td :class="$style.imageList">
            <img
              v-for="(imgItem, index) in printingInfo"
              :key="index"
              :class="$style.previewImage"
              :src="imgItem.ossUrl || cupsheImg"
              alt="印花配色图"
            />
          </td>
        </tr>

        <tr>
          <td :class="$style.labelTitle" colspan="6">线稿图</td>
        </tr>
        <tr>
          <td :class="$style.imageList">
            <img
              v-for="(imgItem, index) in lineDrawingInfo"
              :key="index"
              :class="$style.previewImage"
              :src="imgItem.ossUrl || cupsheImg"
              alt="线稿图"
            />
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  props: {
    productId: {
      type: Number,
      default: -1
    },
    bizScene: {
      type: Number,
      default: -1
    }
  },
  data() {
    return {
      styleInfo: [],
      printingInfo: [],
      lineDrawingInfo: []
    }
  },
  mounted() {
    this.loadData([10, 20, 30])
  },
  methods: {
    loadData(bizTypes) {
      bizTypes.map(type => {
        this.getImageList(type)
      })
    },
    async getImageList(bizType) {
      try {
        const res = await this.$api.oss.list({
          bizId: this.productId,
          bizScene: 110,
          bizType
        })

        this.handleImageType(bizType, res.list)
      } catch (e) {
        console.error(e)
      }
    },
    handleImageType(bizType, info) {
      if (bizType === 10) {
        this.styleInfo = info
      } else if (bizType === 20) {
        this.printingInfo = info
      } else if (bizType === 30) {
        this.lineDrawingInfo = info
      }
    }
  }
}
</script>

<style lang="less" module>
@import './style.less';

.tbody {
  .label {
    width: 10%;
  }
  .value,
  .imageList {
    width: 90%;
  }

  .labelTitle {
    font-size: 18px;
    text-align: left;
    padding: 5px 0 5px 10px;
    border: 1px solid #eee;
  }

  .imageList {
    text-align: left;
  }

  .previewImage {
    width: 100px;
    height: 120px;
    object-fit: cover;
    margin: 5px;
  }
}
</style>
